.home-container {

  .room {
    display: flex;
    flex-wrap: wrap;



    .room-li {
      width: 250px;
      min-height: 130px;
      padding: 15px;
      margin-right: 15px;
      margin-bottom: 15px;
      background: linear-gradient(0deg, #0BBAFB, #4285EC);
      border-radius: 20px;
      position: relative;

      .disabled {
        color: #ccc;
        cursor: not-allowed;
      }

      .room-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 6px;

        .room-switch {
          >span {
            margin-right: 10px;
            font-size: 22px;
            cursor: pointer;
          }
        }
      }


      &:hover {
        box-shadow: 0px 0px 10px #ccc;
      }

      .clear {
        padding: 4px 8px;
        background: #fff;
        color: #3B72C8;
        border-top-left-radius: 15px;
        position: absolute;
        right: 0;
        bottom: 0;
        cursor: pointer;
      }
    }

    .empty-li,
    .add-room {
      cursor: pointer;
      background: linear-gradient(0deg, #E877AE, #7C73F3);


    }

    .empty {
      padding-top: 20px;

    }

    .empty,
    .add-room {
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }


    .add-room {
      background: linear-gradient(0deg, #999, #eee);

      font-size: 30px;
    }
  }

  .staff {
    display: flex;
    flex-wrap: wrap;

    .staff-li {
      width: 100px;
      height: 100px;
      // cursor: pointer;
      border-radius: 50%;

      line-height: 100px;
      text-align: center;
      margin-right: 15px;
      margin-bottom: 15px;
      background: linear-gradient(0deg, #E8DCE9, #FBCDF1);
      color: #C853E9;

      &:hover {
        box-shadow: 0px 0px 10px #ccc;
      }
    }
  }
}
